const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')
module.exports = {
    resolve: {
        extensions: [".js", ".json", ".ts", ".tsx"],
        alias: {
            //根目录
            '@': path.resolve(__dirname, '..', 'src'),
        },
    },
    entry: {
        main: './src/App.tsx',
    },
    output: {
        //如果将JS放到云端  这里配置地址
        // publicPath:'http://cdn.com.cn',
        filename: '[name].js',
        //同默认配置 此处可不写
        path: path.resolve(__dirname, '../dist')
    },
    module: {
        rules: [{
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 600,
                    //占位符配置法,此配置名称与原始文件一致  后面加了一个Hash值
                    name: '[name]-[hash].[ext]',
                    outputPath: 'images/'
                }
            }]
        }, {
            test: /\.(scss)$/,
            use: [{
                loader: "style-loader" // 将 JS 字符串生成为 style 节点
            }, {
                loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
                options: {
                    importLoaders: 2, //如果遇到了引入文件  重新返回2步打包
                    modules: true
                }
            }, {
                loader: "sass-loader" // 将 Sass 编译成 CSS
            }, {
                loader: "postcss-loader" // 将 Sass 编译成 CSS
            }]
        }, {
            test: /\.(css)$/,
            use: [{
                loader: "style-loader" // 将 JS 字符串生成为 style 节点
            }, {
                loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
                options: {
                    importLoaders: 1, //如果遇到了引入文件  重新返回2步打包
                    modules: true
                }
            }, {
                loader: "postcss-loader" // 将 Sass 编译成 CSS
            }]
        }, {
            test: /\.(ts|tsx)?$/i,
            use: [{
                loader: 'babel-loader'
            }, {
                loader: 'ts-loader',
                options: {
                    transpileOnly: true
                }
            }],
            exclude: /node_modules/
        }, {
            test: /\.(js|jsx)$/,
            //排除的文件
            exclude: /node_modules/,
            loader: ["babel-loader"],
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new CleanWebpackPlugin(),
    ],
    optimization: {
        //代码分割
        splitChunks: {
            chunks: "all",
            //默认配置
            // minSize: 30000,
            // //使用次数
            // minChunks: 1,
            // //同时加载n个文件
            // maxAsyncRequests: 5,
            // //入口文件加载的个数
            // maxInitialRequests: 3,
            // //代码分割的分隔符
            // automaticNameDelimiter: '~',
            // name: true,
            // cacheGroups: {
            //     vendors: {
            //         //node_modules中引入的  放到vendors.js文件中
            //         test: /[\\/]node_modules[\\/]/,
            //         //优先级
            //         priority: -10
            //     },
            //     default: {
            //         // minChunks: 2,
            //         priority: -20,
            //         reuseExistingChunk: true
            //     }
            // }
        }
    },
}